<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">app</div>
  </body>
  <script
    src="https://unpkg.com/react@16/umd/react.production.min.js"
    crossorigin
  ></script>
  <script
    src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    crossorigin
  ></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    {/* 存在一些问题,我的add 和increment的处理方式不好弄.. */}
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          books: [
            {
              name: "xjh1",
              price: 12,
              count: 0,
            },
            {
              name: "xjh2",
              price: 188,
              count: 0,
            },
            {
              name: "xjh3",
              price: 15,
              count: 1,
            },
            {
              name: "xjh4",
              price: 78,
              count: 0,
            },
          ],
        };
      }

      getTotal= () => {
        let total = this.state.books.reduce((pre, item) => {
          return pre + item.count * item.price
        }, 0)
        return this.formatPrice(total)
      }
      formatPrice= (price) => {
        return '$' + price
      }
      add = (index) => {
        const newBooks = [...this.state.books]
        newBooks[index].count ++
        this.setState({
          books: newBooks
        })
      }
      increment = (index) => {
        const newBooks = [...this.state.books]
        newBooks[index].count--
        this.setState({
          books: newBooks
        })
      }
      removeBook= (index)=> {
        this.setState({
          books: this.state.books.filter((item, indey) => {
            // console.log(indey)
            return index !== indey
          })
        });
      }
      one () {
        return (
          <div>
            <table>
            <thead>
              <tr>
                <th></th>
                <th>书籍名称</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {this.state.books.map((item, index) => {
                return (
                  <tr>
                    <td>{index}</td>
                    <td>{item.name}</td>
                    <td>{this.formatPrice(item.price)}</td>
                    <td>
                      <button onClick={() => {this.add(index)}}>+</button>  
                        {item.count}
                      <button disabled={item.count <= 0} onClick={() => {this.increment(index)}}>-</button>  
                    </td>
                    <td>
                      <button onClick={() => {this.removeBook(index)}}>移除</button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
            </table>  
            <h2>总价格: {this.getTotal()}</h2>
          </div>
        );
      }
      two () {
        return (
          <h1>购物车是空的~</h1>
        )
      }
      render(h) {
        return this.state.books.length === 0 ? this.two() : this.one()
      }
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
</html>
